<template>
	<div id="woc" class="content ">
		<!-- 面包屑导航 -->
		<Crumbs v-if="show == 11" :item="crumbsItem" @crumbsClick="crumbsClick"></Crumbs>
		<div v-if="show == 11" class="onlineTop">
			<div class="bg">{{ choseMode[modeNume] }}</div>
		</div>
		<!-- 全真模拟页 -->
		<!-- <div class="onlineTabs"> -->
		<!-- <div v-for="(nav, index) in navLi" :class="[navLiActive == index ? 'active' : '']" :key="index" @click="navLiClick(index)">
				<span>{{ nav.quebankname }}</span>
			</div> -->
		<div v-if="show == 1">
			<el-carousel arrow="always" :autoplay="false" :loop="false" height="42px" indicator-position="none">
				<el-carousel-item v-for="(item, index) in navLi" :key="index">
					<div class="nav" v-for="(nav, index) in item" :key="index" @click="navLiClick(nav, index)" :class="[navLiActive == index ? 'active' : '']">
						<div class="tit">{{ nav.quebankname }}</div>
					</div>
				</el-carousel-item>
			</el-carousel>
			<!-- </div> -->
			<!-- 章节选择 -->
			<div id="xuanze" v-if="subChapter.length > 0">
				<ul class="kemu_ul">
					<li v-for="(item, index) in subChapter" :key="index">
						<h1 @click="openKemu(item.subid, index)">
							<span>{{ item.name }}</span>
							<div class="rt_s">
								<i class="mr iconfont icon-shuliang" />
								<span class="mr">错题总数：{{ item.errorcount }}</span>
								<i :class="['iconfont', item.kOpen ? 'icon-jiantou_zhangjiexuanze' : 'icon-jiantou_zhangjiexuanze-copy']" />
							</div>
						</h1>
						<ul class="chapter_ul" v-if="item.kOpen">
							<li v-for="(citem, cindex) in item.chapters" :key="cindex">
								<h1>
									<span>{{ citem.chapterName }}</span>
									<div class="rt_s">
										<span class="mr">练习进度：{{ citem.studyCount }}/{{ citem.counts }}</span>
										<div class="btn" @click="startChose(citem, item.name, item.subid)">开始练习</div>
									</div>
								</h1>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<Empty v-else text="此分类暂无科目"></Empty>
		</div>
		<Popup v-if="modeFlase" :mold="1" :title="modeTit" @closeClick="getChapter(subid), (modeFlase = false)">
			<div slot="modalSlot">
				<div class="modeDiv" @click="modeClick(index)" :class="[modeNume == index ? 'cur' : '']" v-for="(mode, index) in choseMode" :key="index">{{ mode }}</div>
			</div>
		</Popup>
		<answer
			ref="answer"
			v-if="show == 11"
			:CorrectCount="correctCount"
			:ErrorCount="errorCount"
			:Question="Question"
			:CountVO="CountVO"
			:isRecitation="isRecitation"
			:isCorrecting="isCorrecting"
			:Paper="Paper"
			:autoCorrecting="autoCorrecting"
			:updateHis="updataType"
			:topicNumber="Paper.number"
			@updateAnswerHistory="updateAnswerHistory"
		></answer>
	</div>
</template>

<script>
import exam from '../../../mixins/exam.js';
export default {
	name: 'WrongOrColl',
	mixins: [exam],
	components: {},
	data() {
		return {
			pageNo: 1,
			crumbsItem: [{ name: '在线练习', url: 0 }], //面包屑导航
			paperPages: 0, //页数
			navLi: [], //导航
			navLiActive: 0,
			papers: [], //试卷列表
			subChapter: [], //科目列表
			openIndex: 0, //打开的科目
			Paper: {}, //选择的试卷
			modeTit: '选择模式',
			choseMode: ['答题模式', '背题模式'],
			choseType: 1, //1模式  2进度类型
			updataType: 'updateExercise', //updateExercise 背题模式
			modeNume: 0, //选中的模式
			modeFlase: false, //模式的显示
			quebankid: 0,
			show: 1, //显示
			CountVO: {}, //题卡
			Question: [], //题目
			correctCount: 0, //正确数量
			errorCount: 0, //错误数量
			isRecitation: false, //是否背题模式
			isCorrecting: false, //是否批改题目
			quebankname: '', //题库名称
			subjectNam: '', //打开章节的科目名称
			subid: 0 ,//打开科目id
			backStaus:false,//答题页返回
		};
	},
	created() {
		this.getNavLi();
	},
	watch: {
		navLiActive() {
			this.getSubject();
		}
	},
	mounted() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
				this.beforeunloadHandler(e);
			}
		});
	},
	destroyed() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
				this.beforeunloadHandler(e);
			}
		});
	},
	methods: {
		beforeunloadHandler(e) {
			e = e || window.event;
			if (this.show == 11) {
				if (e) {
					e.returnValue = '正在更新数据';
				}
				this.$refs.answer.updateHistoryHander(this.updataType);
				return;
			}
		},
		crumbsClick(type) {
			//导航切换事件
			this.show = type;
			this.backStaus=true;
			if (type == 0) {
				this.getNavLi();
				this.show = 1;
				this.navLiActive = 0;
				this.crumbsInit();
			}
			if (type == 1) {
				this.crumbsInit();
				this.getSubject();
			}
			this.subChapter[this.openIndex].kOpen = true;
		},
		crumbsInit() {
			// 导航默认
			this.crumbsItem = [{ name: '在线练习', url: 0 }];
		},
		setCrumbs(name, url) {
			let navLi = [{ name: this.quebankname, url: 1 }, { name: this.subjectNam, url: 1 }, { name: name, url: url }];
			this.crumbsItem = this.crumbsItem.concat(navLi);
		},
		getNavLi() {
			//获取导航
			this.axios.get('/web/student/exercise/getAllQuestionBank', {}).then(res => {
				// this.navLi = res;
				let a_len = res.length;
				this.navLi = [];
				for (var i = 0; i < a_len; i += 4) {
					this.navLi.push(res.slice(i, i + 4));
				}
				// console.log(this.navLi);
				this.quebankid = this.navLi[0][0].quebankid;
				this.quebankname = this.navLi[0][0].quebankname;
				this.getSubject();
			});
		},
		navLiClick(nav, index) {
			//导航切换
			this.backStaus=false
			this.quebankid = nav.quebankid;
			this.quebankname = nav.quebankname;
			this.navLiActive = index;
		},
		modeClick(index) {
			// console.log(this.Paper, '选择');
			//模式选择
			this.modeNume = index;
			if (this.choseType == 2) {
				//进度模式
				if (index == 1) {
					//选择重新做题
					this.reStart(this.Paper.type);
				} else {
					//继续上次练习 this.Paper.type 1是背题模式
					this.updataType = this.Paper.type == 1 ? 'updateExercise' : 'updateExerciseAnswer';
					this.isRecitation = this.Paper.type == 1 ? true : false;
					this.choseMode[this.modeNume] = this.Paper.type == 1 ? '背题模式' : '答题模式';
					this.startExercises();
					this.setCrumbs(this.Paper.chapterName, 11);
				}
				return;
			} else {
				if (index == 0) {
					// 答题模式
					this.isRecitation = false;
					this.updataType = 'updateExerciseAnswer';
					this.startExercises();
				} else {
					//背题模式
					this.isRecitation = true;
					this.updataType = 'updateExercise';
					this.startExercises();
				}
				this.setCrumbs(this.Paper.chapterName, 11);
			}
		},
		startExercises() {
			this.isCorrecting = true;
			this.autoCorrecting = true;
			this.getExercises(this.Paper.chapterId);
		},
		updateAnswerHistory(chapterId) {
			//清除记录后更新
			this.getExercises(chapterId);
		},
		// 获取科目
		getSubject() {
			this.axios.get(`/web/student/exercise/getSubject/${this.quebankid}`, {}).then(res => {
				this.subChapter = res;
				this.subChapter.forEach(e => {
					this.$set(e, 'kOpen', false);
				});
				let subid = this.subChapter[this.openIndex].subid;
				if(this.backStaus){
					//如果从答题页返回
					this.subChapter[this.openIndex].kOpen=true
				}
				this.getChapter(subid);
			});
		},
		//获取科目章节
		getChapter(subid) {
			this.axios.get(`/web/student/exercise/getChapterBySubjectId/${subid}`, {}).then(res => {
				this.$set(this.subChapter[this.openIndex], 'chapters', res);
			});
		},
		openKemu(subid, index) {
			//展开
			this.subChapter[index].kOpen = !this.subChapter[index].kOpen;
			this.openIndex = index;
			this.getChapter(subid);
		},
		startChose(item, subjectNam, subid) {
			// console.log(item,id);
			this.subid = subid;
			this.subjectNam = subjectNam;
			this.Paper = item; //选择的信息
			this.modeFlase = true;
			if (item.number) {
				this.modeInit(2); //如果已做过本章节
			} else {
				this.modeInit(1); //如果未做过本章节
			}
		},
		modeInit(type) {
			//弹窗展示内容设置
			this.choseType = type; //模式
			if (type == 1) {
				//如果未做过本章节
				this.modeTit = '选择模式';
				this.choseMode = ['答题模式', '背题模式'];
				this.modeNume = 0; //选中的模式
			} else {
				//如果已做过本章节
				this.modeTit = '选择进度';
				this.choseMode = ['继续上次练习', '重新练习'];
				this.modeNume = 0; //选中的模式
			}
		},
		reStart(type) {
			let { chapterId } = this.Paper;
			this.axios.delete(`/web/student/exercise/deleteSchedule/${chapterId}/${type}`, {}).then(res => {
				console.log(res);
				this.choseType = 1;
				this.modeTit = '选择模式';
				this.modeNume = 0;
				this.Paper.number = 1; //题目初始化
				this.choseMode = ['答题模式', '背题模式'];
			});
		}
	}
};
</script>

<style scoped src="../../style/pages/wrongOrColl.css"></style>
<style scoped>
#xuanze .kemu_ul > li {
	margin: 20px 0;
}
#xuanze .chapter_ul h1 {
	border-bottom: 1px solid #ebebeb;
}
.onlineTop {
	width: 100%;
	height: 96px;
	box-shadow: 0px 0px 18px 0px rgba(50, 67, 108, 0.12);
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.onlineTop .bg {
	background: url(../../assets/onlineTop.png) no-repeat center;
	background-size: 100% 100%;
	width: 243px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	color: #394151;
}
/deep/.modalCon {
	width: 418px !important;
	height: 312px !important;
}
.modeDiv {
	margin: 26px auto;
}
/deep/.el-carousel__item {
	display: flex;
	flex-wrap: nowrap;
	line-height: 42px;
	color: #636874;
	overflow: initial;
}
/deep/.el-carousel {
	width: 1300px;
	height: 42px;
	padding: 0 50px;
	margin: 40px 0 40px -50px;
}
/deep/.el-carousel__arrow--left {
	left: -50px;
}
/deep/.el-carousel__arrow--right {
	right: -50px;
}
/deep/.el-carousel__arrow {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	color: #9296a1;
	font-size: 18px;
}
.nav {
	width: 278px;
	height: 42px;
	border: 1px solid rgba(99, 104, 116, 0.2);
	border-radius: 21px;
	text-align: center;
	font-size: 18px;
	font-style: 'sy';
	display: flex;
	justify-content: center;
	margin-right: 30px;
}
.nav:last-child {
	margin-right: 0;
}
.active {
	font-weight: 600;
	color: #f76357;
	border: 1px solid #f45c4b;
}
.nav .tit {
	max-width: 240px;
	text-align: left;
	overflow: hidden; /*超出部分隐藏*/
	text-overflow: ellipsis; /* 超出部分显示省略号 */
	white-space: nowrap; /*规定段落中的文本不进行换行 */
}
/deep/.finalQues_a span:nth-child(2) {
	display: none;
}
</style>
